
  
  

  


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
        <title>Draggable - scriptaculous - GitHub</title>
    <link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="GitHub" />
    <link rel="fluid-icon" href="http://github.com/fluidicon.png" title="GitHub" />

    <link href="bundle_common.css-50db3600c671ce4a4c51f918f6c22e0480bab847" tppabs="http://assets3.github.com/stylesheets/bundle_common.css?50db3600c671ce4a4c51f918f6c22e0480bab847" media="screen" rel="stylesheet" type="text/css" />
<link href="bundle_github.css-50db3600c671ce4a4c51f918f6c22e0480bab847" tppabs="http://assets3.github.com/stylesheets/bundle_github.css?50db3600c671ce4a4c51f918f6c22e0480bab847" media="screen" rel="stylesheet" type="text/css" />

    <script type="text/javascript" charset="utf-8">
      var GitHub = {}
      var github_user = null
    </script>
    <script src="jquery.min.js" tppabs="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <script src="bundle_common.js-50db3600c671ce4a4c51f918f6c22e0480bab847" tppabs="http://assets1.github.com/javascripts/bundle_common.js?50db3600c671ce4a4c51f918f6c22e0480bab847" type="text/javascript"></script>
<script src="bundle_github.js-50db3600c671ce4a4c51f918f6c22e0480bab847" tppabs="http://assets2.github.com/javascripts/bundle_github.js?50db3600c671ce4a4c51f918f6c22e0480bab847" type="text/javascript"></script>

        <script type="text/javascript" charset="utf-8">
      GitHub.spy({
        repo: "madrobby/scriptaculous"
      })
    </script>

    
  <link href="http://github.com/feeds/madrobby/commits/scriptaculous/master" rel="alternate" title="Recent Commits to scriptaculous:master" type="application/atom+xml" />

    <meta name="description" content="script.aculo.us is an open-source JavaScript framework for visual effects and interface behaviours." />
    <script type="text/javascript">
      GitHub.nameWithOwner = GitHub.nameWithOwner || "madrobby/scriptaculous";
      GitHub.currentRef = "master";
    </script>
  

            <script type="text/javascript">
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-3769691-2']);
      _gaq.push(['_trackPageview']);
      (function() {
        var ga = document.createElement('script');
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www/') + '.google-analytics.com/ga.js';
        ga.setAttribute('async', 'true');
        document.documentElement.firstChild.appendChild(ga);
      })();
    </script>

  </head>

  

  <body>
    

    

    <div class="" id="main">
      <div id="header" class="pageheaded">
        <div class="site">
          <div class="logo">
            <a href="javascript:if(confirm('http://github.com/  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/'" tppabs="http://github.com/"><img src="logov3.png" tppabs="http://wiki.github.com/images/modules/header/logov3.png" alt="github" /></a>
          </div>
          
          <div class="topsearch">
  
    <form action="http://github.com/search" id="top_search_form" method="get">
      <a href="javascript:if(confirm('http://github.com/search  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/search'" tppabs="http://github.com/search" class="advanced-search tooltipped downwards" title="Advanced Search">Advanced Search</a>
      <input type="search" class="search repo_autocompleter" name="q" results="5" placeholder="Search&hellip;" /> <input type="submit" value="Search" class="button" />
      <input type="hidden" name="type" value="Everything" />
      <input type="hidden" name="repo" value="" />
      <input type="hidden" name="langOverride" value="" />
      <input type="hidden" name="start_value" value="1" />
    </form>
  
  
    <ul class="nav logged_out">
      
        <li><a href="javascript:if(confirm('http://github.com/  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/'" tppabs="http://github.com/">Home</a></li>
        <li class="pricing"><a href="javascript:if(confirm('http://github.com/plans  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/plans'" tppabs="http://github.com/plans">Pricing and Signup</a></li>
        <li><a href="javascript:if(confirm('http://github.com/explore  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/explore'" tppabs="http://github.com/explore">Explore GitHub</a></li>
        
        <li><a href="javascript:if(confirm('http://wiki.github.com/blog  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://wiki.github.com/blog'" tppabs="http://wiki.github.com/blog">Blog</a></li>
      
      <li></li>
    </ul>
  
</div>

        </div>
      </div>

      
      
        
    <div class="site">
      <div class="pagehead repohead vis-public   emptyrepohead shortdetails">
        <h1>
          <a href="javascript:if(confirm('http://github.com/madrobby  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/madrobby'" tppabs="http://github.com/madrobby">madrobby</a> / <strong><a href="javascript:if(confirm('http://github.com/madrobby/scriptaculous  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/madrobby/scriptaculous'" tppabs="http://github.com/madrobby/scriptaculous">scriptaculous</a></strong>
          
          
        </h1>

        
    <ul class="actions">
      
      
      <li class="repostats">
        <ul class="repo-stats">
          <li class="watchers"><a href="javascript:if(confirm('http://github.com/madrobby/scriptaculous/watchers  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/madrobby/scriptaculous/watchers'" tppabs="http://github.com/madrobby/scriptaculous/watchers" title="Watchers" class="tooltipped downwards">1,483</a></li>
          <li class="forks"><a href="javascript:if(confirm('http://github.com/madrobby/scriptaculous/network  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/madrobby/scriptaculous/network'" tppabs="http://github.com/madrobby/scriptaculous/network" title="Forks" class="tooltipped downwards">409</a></li>
        </ul>
      </li>
    </ul>


        <ul class="tabs">
  <li><a href="javascript:if(confirm('http://github.com/madrobby/scriptaculous/tree/master  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/madrobby/scriptaculous/tree/master'" tppabs="http://github.com/madrobby/scriptaculous/tree/master" class="false" highlight="repo_source">Source</a></li>
  <li><a href="javascript:if(confirm('http://github.com/madrobby/scriptaculous/commits/master  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/madrobby/scriptaculous/commits/master'" tppabs="http://github.com/madrobby/scriptaculous/commits/master" class="false" highlight="repo_commits">Commits</a></li>

  
  <li><a href="javascript:if(confirm('http://github.com/madrobby/scriptaculous/network  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/madrobby/scriptaculous/network'" tppabs="http://github.com/madrobby/scriptaculous/network" class="false" highlight="repo_network">Network</a></li>

  

  

  
    
    <li><a href="javascript:if(confirm('http://github.com/madrobby/scriptaculous/downloads  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/madrobby/scriptaculous/downloads'" tppabs="http://github.com/madrobby/scriptaculous/downloads" class="false">Downloads</a></li>
  

  
    
    <li><a href="index.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/" class="false">Wiki</a></li>
  

  <li><a href="javascript:if(confirm('http://github.com/madrobby/scriptaculous/graphs  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/madrobby/scriptaculous/graphs'" tppabs="http://github.com/madrobby/scriptaculous/graphs" class="false" highlight="repo_graphs">Graphs</a></li>

  <li class="contextswitch nochoices">
    <span class="toggle leftwards" >
      <em>Branch:</em>
      <code>master</code>
    </span>
  </li>
</ul>

<div style="display:none" id="pl-description"><p><em class="placeholder">click here to add a description</em></p></div>
<div style="display:none" id="pl-homepage"><p><em class="placeholder">click here to add a homepage</em></p></div>










        

      </div><!-- /.pagehead -->

      



<div id="repos">
  


<script type="text/javascript">
  GitHub.currentCommitRef = "master"
  GitHub.currentRepoOwner = "madrobby"
  GitHub.currentRepo = "scriptaculous"
  GitHub.downloadRepo = '/madrobby/scriptaculous/archives/master'
  

  
</script>








</div>

<div id="guides">
  <div class="guide">
    <!-- main content -->

    <div class="main">

      
        <div class="actions">
          <a href="index.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/">Home</a>
          | <a href="javascript:if(confirm('http://github.com/madrobby/scriptaculous/wikis/draggable/edit  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/madrobby/scriptaculous/wikis/draggable/edit'" tppabs="http://github.com/madrobby/scriptaculous/wikis/draggable/edit">Edit</a> |
          <a href="javascript:if(confirm('http://github.com/madrobby/scriptaculous/wikis/new  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/madrobby/scriptaculous/wikis/new'" tppabs="http://github.com/madrobby/scriptaculous/wikis/new">New</a>
        </div>
      

      <h1>Draggable</h1>

      <div class="wikistyle">
        <link rel="stylesheet" title="Sunburst" href="sunburst.css" tppabs="http://script.aculo.us/github/styles/sunburst.css">
<script type="text/javascript" src="prototype.js" tppabs="http://script.aculo.us/prototype.js"></script><script type="text/javascript" src="scriptaculous.js" tppabs="http://script.aculo.us/scriptaculous.js"></script><p style="background:#eee; border-bottom:1px solid #bbb; padding:4px 2px 2px 2px;"><a href="behaviours.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/behaviours">Behaviours</a> &gt; <strong>Draggable</strong></p>
<p>To make an element draggable, create a new instance of class <em>Draggable</em>.<br />
For additional built-in functionality, make a <a href="sortable.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/sortable">Sortable</a> instead.</p>
<p>There is also a class named <a href="draggables-object.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/draggables-object">Draggables</a> that exposes functions for observing drag actions.</p>
<p>Draggables become much more useful when you use them with <a href="droppables.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/droppables">droppables</a>, which are the areas that you can drag draggables to.</p>
<h2>Syntax</h2>
<pre><code class="javascript">
new Draggable('id_of_element', [options]);
</code></pre>
<h2>Options</h2>
<table>
	<tr>
		<th>Option </th>
		<th>Since </th>
		<th>Description </th>
	</tr>
	<tr>
		<td> handle </td>
		<td> 1.0 </td>
		<td> string or <span class="caps">DOM</span> reference, not set by default. Sets whether the element should only be draggable by an embedded handle. The value must be an element reference or element id. </td>
	</tr>
	<tr>
		<td> handle </td>
		<td> 1.5. </td>
		<td> string or <span class="caps">DOM</span> reference, not set by default. As above, except now the value may be a string referencing a <span class="caps">CSS</span> class value. The first child/grandchild/etc. element found within the element that has this <span class="caps">CSS</span> class value will be used as the handle. </td>
	</tr>
	<tr>
		<td> revert </td>
		<td> 1.0 </td>
		<td> boolean, defaults to <code>false</code>. If set to <code>true</code>, the element returns to its original position when the drags ends. </td>
	</tr>
	<tr>
		<td> revert </td>
		<td> 1.5 </td>
		<td> boolean or function reference, defaults to <code>false</code>. Revert can also be an arbitrary function reference, called when the drag ends. Specifying <code>'failure'</code> will instruct the draggable not to revert if successfully dropped in a droppable. </td>
	</tr>
	<tr>
		<td> snap </td>
		<td> 1.5 </td>
		<td> If set to false no snapping occurs. Otherwise takes one of the following forms &#8211; <code>Δi</code>: one delta value for both horizontal and vertical snap, <code>[Δx, Δy]</code>: delta values for horizontal and vertical snap, <code>function(x, y, draggable_object) { return [x, y]; }</code>: a function that receives the proposed new top left coordinate pair and returns the coordinate pair to actually be used. </td>
	</tr>
	<tr>
		<td> zindex </td>
		<td> 1.5 </td>
		<td> integer value, defaults to 1000. The css <code>z-index</code> of the draggable item. </td>
	</tr>
	<tr>
		<td> constraint </td>
		<td> 1.0 </td>
		<td> string, not set by default. If set to <code>'horizontal'</code> or <code>'vertical'</code> the drag will be constrained to take place only horizontally or vertically. </td>
	</tr>
	<tr>
		<td> ghosting </td>
		<td> ?? </td>
		<td> boolean, defaults to <code>false</code>. Clones the element and drags the clone, leaving the original in place until the clone is dropped. </td>
	</tr>
	<tr>
		<td> starteffect </td>
		<td> ?? </td>
		<td> Effect, defaults to <a href="effect-opacity.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-opacity">Effect.Opacity</a>. Defines the effect to use when the draggable starts being dragged. </td>
	</tr>
	<tr>
		<td> reverteffect </td>
		<td> ?? </td>
		<td> Effect, default to <a href="effect-move.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-move">Effect.Move</a>. Defines the effect to use when the draggable reverts back to its starting position. </td>
	</tr>
	<tr>
		<td> endeffect </td>
		<td> ?? </td>
		<td> Effect, defaults to <a href="effect-opacity.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-opacity">Effect.Opacity</a>. Defines the effect to use when the draggable stops being dragged. </td>
	</tr>
	<tr>
		<td> scroll </td>
		<td> ?? </td>
		<td> string or <span class="caps">DOM</span> reference, not set by default. Specifies the element which will scroll when you get to the boundary. By default this is turned off. </td>
	</tr>
	<tr>
		<td> scrollSensitivity </td>
		<td> ?? </td>
		<td> integer value, defaults to 20 pixels. Minimum distance from the element boundary to start scrolling. </td>
	</tr>
</table>
<p>Additionally, the options parameter accepts any of the following callback functions:</p>
<table>
	<tr>
		<th>Callback </th>
		<th>Description </th>
	</tr>
	<tr>
		<td> onStart </td>
		<td> Called when a drag is initiated. </td>
	</tr>
	<tr>
		<td> onDrag </td>
		<td> Called repeatedly as the mouse moves, before the draggable position is updated if mouse position changed from previous call. </td>
	</tr>
	<tr>
		<td> change </td>
		<td> Called just as onDrag, but after the draggable position is updated. Gets the Draggable instance as its parameter. </td>
	</tr>
	<tr>
		<td> onEnd </td>
		<td> Called when a drag is ended. </td>
	</tr>
</table>
<p>Except for the <code>change</code> callback, each of these callbacks accepts two parameters: the Draggable object, and the mouse event object.</p>
<h2>Examples</h2>
<pre><code class="javascript">
// revert
new Draggable('product_1', { revert: true });

// constrain direction and give a handle
new Draggable('my_div', { constraint: 'horizontal', handle: 'handle' });
</code></pre>
<p>To disable draggables later on, store it in a variable like:<br />
<pre><code class="javascript">
var mydrag = new Draggable('product_1', { revert: true });
// then destroy it when you don't need it anymore
mydrag.destroy();
</code></pre></p>
<p>This way, you can enable and disable dragging at will.</p>
<h2>Demo</h2>
<p>A demo with the default options</p>
<div class="demo">
  <div id="drag_demo_1" style="width:80px; height:80px; cursor:move; background:#7baaed; border:1px solid #333;"></div>
  <script type="text/javascript">
    new Draggable('drag_demo_1');
  </script>
</div>
<p>A demo with <code>{ revert: true, snap: [40, 40] }</code> set as options</p>
<div class="demo">
  <div id="drag_demo_2" style="width:80px; height:80px; cursor:move; background:#fff85d; border:1px solid #333;"></div>
  <script type="text/javascript">
    new Draggable('drag_demo_2', { revert: true, snap: [40, 40] });
  </script>
</div>
<p>A demo with <code>{ scroll: window }</code> set as options</p>
<div class="demo">
  <div id="drag_demo_3" style="width:80px; height:80px; cursor:move; background:#88da5d; border:1px solid #333;"></div>
  <script type="text/javascript">
    new Draggable('drag_demo_3', { scroll: window });
  </script>
</div>
<h3>Source code of the demo</h3>
<p>Demo 1 (default options)<br />
<pre><code class="html">
&lt;div id="drag_demo_1" style="width:100px; height:100px; background:#7baaed; border:1px solid #333;"&gt;&lt;/div&gt;
  &lt;script type="text/javascript"&gt;
    new Draggable('drag_demo_1');
  &lt;/script&gt;
</code></pre></p>
<p>Demo 2 (with <code>revert</code> and <code>snap</code> set)<br />
<pre><code class="html">
&lt;div id="drag_demo_2" style="width:100px; height:100px; background:#fff85d; border:1px solid #333;"&gt;&lt;/div&gt;
  &lt;script type="text/javascript"&gt;
    new Draggable('drag_demo_2', { revert: true, snap: [40, 40] });
  &lt;/script&gt;
</code></pre></p>
<p>Demo 3 (with <code>scroll</code> set)<br />
<pre><code>
&lt;div id="drag_demo_3" style="width:80px; height:80px; cursor:move; background:#88da5d; border:1px solid #333;"&gt;&lt;/div&gt;
  &lt;script type="text/javascript"&gt;
    new Draggable('drag_demo_3', { scroll: window });
  &lt;/script&gt;
</code></pre></p>
<script type="text/javascript" src="highlight.js" tppabs="http://script.aculo.us/github/highlight.js"></script><script type="text/javascript">
  hljs.initHighlightingOnLoad.apply(null, hljs.ALL_LANGUAGES);
</script>
      </div>
    </div>

    <!-- sidebar -->

    <div class="sidebar">
      <h3>
        Pages
        <a href="javascript:if(confirm('http://wiki.github.com/madrobby/scriptaculous//wikis.atom  \n\nThis file was not retrieved by Teleport Pro, because the server reports that this file cannot be found.  \n\nDo you want to open it from the server?'))window.location='http://wiki.github.com/madrobby/scriptaculous//wikis.atom'" tppabs="http://wiki.github.com/madrobby/scriptaculous//wikis.atom"><img alt="feed" src="feed.png-50db3600c671ce4a4c51f918f6c22e0480bab847" tppabs="http://assets0.github.com/images/icons/feed.png?50db3600c671ce4a4c51f918f6c22e0480bab847" title="Feed of recent scriptaculous wiki edits" /></a>
      </h3>
      


<ul>
  
    <li><b><a href="in-place-editor.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/in-place-editor"> In Place Editor</a></b></li>
  
    <li><b><a href="ajax-autocompleter.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/ajax-autocompleter">Ajax.Autocompleter</a></b></li>
  
    <li><b><a href="ajax-inplacecollectioneditor.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/ajax-inplacecollectioneditor">Ajax.InPlaceCollectionEditor</a></b></li>
  
    <li><b><a href="ajax-inplaceeditor.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/ajax-inplaceeditor">Ajax.InPlaceEditor</a></b></li>
  
    <li><b><a href="autocompleterbase.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/autocompleterbase">Autocompleter.Base</a></b></li>
  
    <li><b><a href="autocompleter-local.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/autocompleter-local">Autocompleter.Local</a></b></li>
  
    <li><b><a href="behaviours.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/behaviours">Behaviours</a></b></li>
  
    <li><b><a href="builder.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/builder">Builder</a></b></li>
  
    <li><b><a href="combination-effects.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/combination-effects">Combination Effects</a></b></li>
  
    <li><b><a href="combination-effects-demo.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/combination-effects-demo">Combination Effects Demo</a></b></li>
  
    <li><b><a href="contribute.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/contribute">Contribute</a></b></li>
  
    <li><b><a href="controls.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/controls">Controls</a></b></li>
  
    <li><b><a href="core-effects.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/core-effects">Core Effects</a></b></li>
  
    <li><b><a href="demos.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/demos">Demos</a></b></li>
  
    <li><b><a href="draggable.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/draggable">Draggable</a></b></li>
  
    <li><b><a href="draggables-object.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/draggables-object">Draggables Object</a></b></li>
  
    <li><b><a href="droppables.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/droppables">Droppables</a></b></li>
  
    <li><b><a href="effect-queues.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-queues">Effect Queues</a></b></li>
  
    <li><b><a href="effect-appear.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-appear">Effect.Appear</a></b></li>
  
    <li><b><a href="effect-blinddown.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-blinddown">Effect.BlindDown</a></b></li>
  
    <li><b><a href="effect-blindup.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-blindup">Effect.BlindUp</a></b></li>
  
    <li><b><a href="effect-dropout.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-dropout">Effect.DropOut</a></b></li>
  
    <li><b><a href="effect-fade.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-fade">Effect.Fade</a></b></li>
  
    <li><b><a href="effect-fold.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-fold">Effect.Fold</a></b></li>
  
    <li><b><a href="effect-grow.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-grow">Effect.Grow</a></b></li>
  
    <li><b><a href="effect-highlight.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-highlight">Effect.Highlight</a></b></li>
  
    <li><b><a href="effect-methods.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-methods">Effect.Methods</a></b></li>
  
    <li><b><a href="effect-morph.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-morph">Effect.Morph</a></b></li>
  
    <li><b><a href="effect-move.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-move">Effect.Move</a></b></li>
  
    <li><b><a href="effect-multiple.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-multiple">Effect.multiple</a></b></li>
  
    <li><b><a href="effect-opacity.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-opacity">Effect.Opacity</a></b></li>
  
    <li><b><a href="effect-parallel.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-parallel">Effect.Parallel</a></b></li>
  
    <li><b><a href="effect-puff.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-puff">Effect.Puff</a></b></li>
  
    <li><b><a href="effect-pulsate.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-pulsate">Effect.Pulsate</a></b></li>
  
    <li><b><a href="effect-scale.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-scale">Effect.Scale</a></b></li>
  
    <li><b><a href="effectscrollto.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effectscrollto">Effect.ScrollTo</a></b></li>
  
    <li><b><a href="effect-shake.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-shake">Effect.Shake</a></b></li>
  
    <li><b><a href="effect-shrink.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-shrink">Effect.Shrink</a></b></li>
  
    <li><b><a href="effect-slidedown.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-slidedown">Effect.SlideDown</a></b></li>
  
    <li><b><a href="effect-slideup.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-slideup">Effect.SlideUp</a></b></li>
  
    <li><b><a href="effect-squish.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-squish">Effect.Squish</a></b></li>
  
    <li><b><a href="effect-switchoff.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-switchoff">Effect.SwitchOff</a></b></li>
  
    <li><b><a href="effect-tagifytext.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-tagifytext">Effect.tagifyText</a></b></li>
  
    <li><b><a href="effect-toggle.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-toggle">Effect.toggle</a></b></li>
  
    <li><b><a href="effect-transitions.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-transitions">Effect.Transitions</a></b></li>
  
    <li><b><a href="effecttween.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effecttween">Effect.Tween</a></b></li>
  
    <li><b><a href="effects.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effects">Effects</a></b></li>
  
    <li><b><a href="faq.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/faq">FAQ</a></b></li>
  
    <li><b><a href="formelementdelayedobserver.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/formelementdelayedobserver">Form.Element.DelayedObserver</a></b></li>
  
    <li><b><a href="ghostly.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/ghostly">Ghostly</a></b></li>
  
    <li><b><a href="ghostly-sortable-demo.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/ghostly-sortable-demo">Ghostly Sortable Demo</a></b></li>
  
    <li><b><a href="giving-elements-layout.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/giving-elements-layout">Giving Elements Layout</a></b></li>
  
    <li><b><a href="javascript:if(confirm('http://wiki.github.com/madrobby/scriptaculous  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://wiki.github.com/madrobby/scriptaculous'" tppabs="http://wiki.github.com/madrobby/scriptaculous">Home</a></b></li>
  
    <li><b><a href="license.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/license">License</a></b></li>
  
    <li><b><a href="list-morph-demo.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/list-morph-demo">List Morph Demo</a></b></li>
  
    <li><b><a href="porting.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/porting">porting</a></b></li>
  
    <li><b><a href="puzzle-demo.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/puzzle-demo">Puzzle Demo</a></b></li>
  
    <li><b><a href="ruby-on-rails.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/ruby-on-rails">Ruby on Rails</a></b></li>
  
    <li><b><a href="slider.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/slider">Slider</a></b></li>
  
    <li><b><a href="sortable.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/sortable">Sortable</a></b></li>
  
    <li><b><a href="sortable-lists-demo.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/sortable-lists-demo">Sortable Lists Demo</a></b></li>
  
    <li><b><a href="sortable-create.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/sortable-create">Sortable.create</a></b></li>
  
    <li><b><a href="sortable-sequence.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/sortable-sequence">Sortable.sequence</a></b></li>
  
    <li><b><a href="sortable-serialize.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/sortable-serialize">Sortable.serialize</a></b></li>
  
    <li><b><a href="sortables.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/sortables">Sortables</a></b></li>
  
    <li><b><a href="sortables-create.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/sortables-create">Sortables.create</a></b></li>
  
    <li><b><a href="sound.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/sound">Sound</a></b></li>
  
    <li><b><a href="style-guide.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/style-guide">Style Guide</a></b></li>
  
    <li><b><a href="tabs.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/tabs">Tabs</a></b></li>
  
    <li><b><a href="testunit.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/testunit">Test.Unit</a></b></li>
  
    <li><b><a href="testunitassertions.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/testunitassertions">Test.Unit.Assertions</a></b></li>
  
    <li><b><a href="testunitlogger.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/testunitlogger">Test.Unit.Logger</a></b></li>
  
    <li><b><a href="test-unit-runner.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/test-unit-runner">Test.Unit.Runner</a></b></li>
  
    <li><b><a href="testunittestcase.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/testunittestcase">Test.Unit.Testcase</a></b></li>
  
    <li><b><a href="unit-testing.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/unit-testing">Unit Testing</a></b></li>
  
</ul>

      
    </div>

  </div>

  <!-- admin -->

  
    <div class="admin">
      <div style="float:left;">
        <small>Last edited by <b>rapheld</b>, <abbr class="relatize" title="2009-10-27 13:50:56">Tue Oct 27 13:50:56 -0700 2009</abbr></small>

        <div class="actions">
          <a href="index.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/">Home</a>
          | <a href="javascript:if(confirm('http://github.com/madrobby/scriptaculous/wikis/draggable/edit  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/madrobby/scriptaculous/wikis/draggable/edit'" tppabs="http://github.com/madrobby/scriptaculous/wikis/draggable/edit">Edit</a> |
          <a href="javascript:if(confirm('http://github.com/madrobby/scriptaculous/wikis/new  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/madrobby/scriptaculous/wikis/new'" tppabs="http://github.com/madrobby/scriptaculous/wikis/new">New</a>
        </div>
      </div>

      <div style="float:right;">
        <small>Versions:</small>
        <select id="versions_select" name="versions_select"><option value="http://github.com/madrobby/scriptaculous/wikis/draggable">Current</option><option value="http://wiki.github.com/madrobby/scriptaculous/draggable/13">Version 13 by rapheld</option><option value="http://wiki.github.com/madrobby/scriptaculous/draggable/12">Version 12 by jwheare</option><option value="http://wiki.github.com/madrobby/scriptaculous/draggable/11">Version 11 by efer22</option><option value="http://wiki.github.com/madrobby/scriptaculous/draggable/10">Version 10 by Santino</option><option value="http://wiki.github.com/madrobby/scriptaculous/draggable/9">Version 9 by 08112008</option><option value="http://wiki.github.com/madrobby/scriptaculous/draggable/8">Version 8 by ryanwilson</option><option value="http://wiki.github.com/madrobby/scriptaculous/draggable/7">Version 7 by pkaeding</option><option value="http://wiki.github.com/madrobby/scriptaculous/draggable/6">Version 6 by jdalton</option><option value="http://wiki.github.com/madrobby/scriptaculous/draggable/5">Version 5 by warptube</option><option value="http://wiki.github.com/madrobby/scriptaculous/draggable/4">Version 4 by warptube</option><option value="http://wiki.github.com/madrobby/scriptaculous/draggable/3">Version 3 by warptube</option><option value="http://wiki.github.com/madrobby/scriptaculous/draggable/2">Version 2 by joe-loco</option><option value="http://wiki.github.com/madrobby/scriptaculous/draggable/1">Version 1 by madrobby</option></select>
      </div>
    </div>
  
</div>



    </div>
  
      

      <div class="push"></div>
    </div>

    <div id="footer">
      <div class="site">
        <div class="info">
          <div class="links">
            <a href="javascript:if(confirm('http://github.com/blog  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/blog'" tppabs="http://github.com/blog"><b>Blog</b></a> |
            <a href="javascript:if(confirm('http://support.github.com/  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://support.github.com/'" tppabs="http://support.github.com/">Support</a> |
            <a href="javascript:if(confirm('http://github.com/training  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/training'" tppabs="http://github.com/training">Training</a> |
            <a href="javascript:if(confirm('http://github.com/contact  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/contact'" tppabs="http://github.com/contact">Contact</a> |
            <a href="javascript:if(confirm('http://develop.github.com/  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://develop.github.com/'" tppabs="http://develop.github.com/">API</a> |
            <a href="javascript:if(confirm('http://status.github.com/  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://status.github.com/'" tppabs="http://status.github.com/">Status</a> |
            <a href="javascript:if(confirm('http://twitter.com/github  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://twitter.com/github'" tppabs="http://twitter.com/github">Twitter</a> |
            <a href="javascript:if(confirm('http://help.github.com/  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://help.github.com/'" tppabs="http://help.github.com/">Help</a> |
            <a href="javascript:if(confirm('http://github.com/security  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/security'" tppabs="http://github.com/security">Security</a>
          </div>
          <div class="company">
            &copy;
            2010
            <span id="_rrt" title="0.82203s from fe1.rs.github.com">GitHub</span> Inc.
            All rights reserved. |
            <a href="javascript:if(confirm('http://wiki.github.com/site/terms  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://wiki.github.com/site/terms'" tppabs="http://wiki.github.com/site/terms">Terms of Service</a> |
            <a href="javascript:if(confirm('http://wiki.github.com/site/privacy  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://wiki.github.com/site/privacy'" tppabs="http://wiki.github.com/site/privacy">Privacy Policy</a>
          </div>
        </div>
        <div class="sponsor">
          <div>
            Powered by the <a href="javascript:if(confirm('http://www.rackspace.com/  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://www.rackspace.com/'" tppabs="http://www.rackspace.com/">Dedicated
            Servers</a> and<br/> <a href="javascript:if(confirm('http://www.rackspacecloud.com/  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://www.rackspacecloud.com/'" tppabs="http://www.rackspacecloud.com/">Cloud
            Computing</a> of Rackspace Hosting<span>&reg;</span>
          </div>
          <a href="javascript:if(confirm('http://www.rackspace.com/  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://www.rackspace.com/'" tppabs="http://www.rackspace.com/">
            <img alt="Dedicated Server" src="rackspace_logo.png-50db3600c671ce4a4c51f918f6c22e0480bab847" tppabs="http://assets2.github.com/images/modules/footer/rackspace_logo.png?50db3600c671ce4a4c51f918f6c22e0480bab847" />
          </a>
        </div>
      </div>
    </div>

    
    
    
  </body>
</html>

